<style scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.layout-logo {
  /* background: #5b6270; */
  line-height: 70px;
  color: #f5f7f9;
  float: left;
  position: relative;
  font-size: 20px;
  font-weight: 600;
}

.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.ivu-layout-header {
  background: #9babc3;
  height: 8vh;
}
</style>
<template>
  <div class="layout">
    <Layout>
      <Header>
        <div class="layout-logo">杂七杂八数据平台</div>
        <div class="layout-nav">
          <img
            src="../imgs/admin.jpg"
            style="width: 32px; border-radius: 50%"
          />
          <span style="margin: 0 10px">{{ userInfo.nickName }}</span>
          <Button
            type="error"
            shape="circle"
            icon="md-power"
            @click="handleToPower"
          ></Button>
        </div>
      </Header>
      <Layout>
        <Sider
          hide-trigger
          :style="{ background: '#fff' }"
          style="height: 92vh"
        >
          <Menu
            active-name="0-2"
            theme="light"
            width="auto"
            :open-names="['0']"
            @on-select="selectMenu"
          >
            <template>
              <Submenu
                v-for="(item, index) in menuList"
                :key="`menu${index}`"
                :name="index.toString()"
              >
                <template slot="title">
                  <Icon :type="item.icon"></Icon>
                  {{ item.title }}
                </template>
                <MenuItem
                  v-for="(childItem, childIndex) in item.children"
                  :name="index + '-' + childIndex"
                  :to="childItem.routerLinkTo"
                  :key="childIndex"
                >
                  <span style="color: #515a61">{{ childItem.title }}</span>
                </MenuItem>
              </Submenu>
            </template>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '0 24px 24px', height: contentHeight }">
          <Breadcrumb :style="{ margin: '24px 0' }">
            <BreadcrumbItem>主页</BreadcrumbItem>
            <BreadcrumbItem>{{ crumbsData1 }}</BreadcrumbItem>
            <BreadcrumbItem v-show="crumbsData2 != ''">{{
              crumbsData2
            }}</BreadcrumbItem>
          </Breadcrumb>
          <Content
            :style="{
              minHeight: '280px',
              background: '#fff',
            }"
            style="overflow:auto;"
          >
            <router-view />
          </Content>
        </Layout>
      </Layout>
    </Layout>
    <Modal
      v-model="power"
      @on-ok="handleOk"
      width="10"
      @on-cancel="handleCancel"
    >
      <p>是否退出？</p>
    </Modal>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      isCollapsed: false,
      avatar: "",
      power: false,
      crumbsData1: "评价规则设置", //面包屑
      crumbsData2: "评价期限设置",
      contentHeight: "840px",
      windowsHeight: window.innerHeight,
      menuList: [
        {
          title: "图表类",
          icon: "ios-bookmarks",
          children: [
            {
              title: "echarts",
              name: "echarts",
              icon: "ios-navigate",
              routerLinkTo: "/home/dataMaintain/echarts",
            },
            {
              title: "树形拓扑图",
              name: "echartsTree",
              icon: "ios-navigate",
              routerLinkTo: "/home/dataMaintain/echartsTree",
            },
            {
              title: "世界地图",
              name: "worldMap",
              icon: "ios-navigate",
              routerLinkTo: { name: "worldMap" },
            },
            {
              title: "点连线",
              name: "pointLine",
              icon: "ios-navigate",
              routerLinkTo: { name: "pointLine" },
            },
            {
              title: "3d Tree demo",
              name: "3d",
              icon: "ios-navigate",
              routerLinkTo: "/home/3d/3d",
            },
            {
              title: "3d卡片",
              name: "card",
              icon: "ios-navigate",
              routerLinkTo: "/home/3d/card",
            },
            {
              title: "汽车模型",
              name: "car",
              icon: "ios-navigate",
              routerLinkTo: "/home/3d/car",
            },
            {
              title: "图片3d化",
              name: "img3d",
              icon: "ios-navigate",
              routerLinkTo: "/home/3d/img3d",
            },
          ],
        },
        {
          title: "评价规则设置",
          icon: "ios-bookmarks",
          children: [
            {
              title: "评价期限设置",
              name: "termSetting",
              icon: "ios-navigate",
              routerLinkTo: "/home/ruleSetting/termSetting",
            },
            {
              title: "计算规则设置",
              name: "ruleSetting",
              icon: "ios-navigate",
              routerLinkTo: "/home/ruleSetting/ruleSetting",
            },
          ],
        },
        {
          title: "功能列表",
          icon: "md-filing",
          children: [
            {
              title: "流程设计",
              name: "dataFactory",
              icon: "ios-navigate",
              routerLinkTo: "/home/ruleEngine/dataFactory",
            },
            {
              title: "打印pdf",
              name: "printPdfDom",
              icon: "ios-navigate",
              routerLinkTo: "/home/systemManagement/printPdfDom",
            },
            {
              title: "ws聊天框",
              name: "wsChart",
              icon: "ios-navigate",
              routerLinkTo: { name: "wsChart" },
            },
            {
              title: "接口代码生成器",
              name: "codeGenerator",
              icon: "ios-navigate",
              routerLinkTo: { name: "codeGenerator" },
            },
            {
              title: "word处理",
              name: "wordSystem",
              icon: "ios-navigate",
              routerLinkTo: { name: "wordSystem" },
            }
          ],
        },
        {
          title: "系统管理",
          icon: "ios-cog",
          children: [
            {
              title: "文件分类",
              name: "dataCenter",
              icon: "ios-navigate",
              routerLinkTo: "/home/ruleEngine/dataCenter",
            },
            {
              title: "文件管理",
              name: "fileManagement",
              icon: "ios-navigate",
              routerLinkTo: "/home/systemManagement/fileManagement",
            },
          ],
        },
        {
          title: "密码1",
          icon: "ios-cog",
          children: [
            {
              title: "任务统计",
              name: "echarsHome",
              icon: "ios-navigate",
              routerLinkTo: { name: "echarsHome" },
            },
            {
              title: "任务管理",
              name: "echarsHome",
              icon: "ios-navigate",
              routerLinkTo: { name: "workManagement" },
            },
          ],
        },
        {
          title: "可编辑大屏",
          icon: "ios-cog",
          children: [
            {
              title: "编辑",
              name: "editVisual",
              icon: "ios-navigate",
              routerLinkTo: { name: "editVisual" },
            },
          ],
        },
        {
          title: "组件类",
          icon: "ios-cog",
          children:[
            {
              title:"文件夹样式卡片",
              name:"folderCard",
              icon: "ios-navigate",
              routerLinkTo: { name: "folderCard" },
            }
          ]
        }
      ],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),

    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    },
    menuitemClasses() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
  },
  watch: {
    windowsHeight(newVal, oldVal) {
      console.log("监听事件出发", newVal, oldVal);
      this.fnWatchWidth(newVal);
    },
  },
  methods: {
    fnWatchWidth(newVal) {
      if (newVal > 1200) {
        this.contentHeight = newVal - 90 + "px";
      } else {
        this.contentHeight = newVal - 70 + "px";
      }
    },
    collapsedSider() {
      this.$refs.side1.toggleCollapse();
    },
    // 菜单点击事件
    selectMenu(event) {
      console.log(event);
      if (event == `1-1`) {
        console.log("!!!");
        this.crumbsData1 = "评价规则设置";
        this.crumbsData2 = "评价期限设置";
      } else if (event == `1-2`) {
        this.crumbsData1 = "评价规则设置";
        this.crumbsData2 = "计算规则设置";
      } else if (event == `2-1`) {
        this.crumbsData1 = "功能列表";
        this.crumbsData2 = "文件分类";
      } else if (event == `2-2`) {
        this.crumbsData1 = "功能列表";
        this.crumbsData2 = "流程设计";
      } else if (event == `0-2`) {
        this.crumbsData1 = "数据维护";
        this.crumbsData2 = "参评企业导入";
      }
      console.log("!!!", this.crumbsData);
    },
    handleToPower() {
      this.power = true;
    },
    handleOk() {
      this.$Message.info("退出成功！");
      localStorage.clear();
      this.$router.push({ name: "login" });
    },
    handleCancel() {
      this.$Message.info("取消");
    },
  },
  mounted() {
    this.fnWatchWidth(this.windowsHeight);
    window.addEventListener("resize", () => {
      this.windowsHeight = window.innerHeight;
    });
  },
};
</script>
